---
type: tutorial
title: Crea il tuo primo progetto Astro
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Crea un nuovo progetto per il tutorial di Astro e preparati a programmare
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - Esegui la procedura guidata `create astro` per creare un nuovo progetto Astro
  - Avvia il server Astro in modalità di sviluppo (dev)
  - Visualizza un'anteprima live del tuo sito web nel tuo browser
</PreCheck>

## Avvia la procedura guidata di installazione di Astro

Il modo preferito per creare un nuovo sito Astro è attraverso la nostra procedura guidata di installazione `create astro`.

<Steps>
1. Nella riga di comando del tuo terminale, esegui il comando seguente utilizzando il tuo package manager preferito:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # crea un nuovo progetto con npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # crea un nuovo progetto con pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # crea un nuovo progetto con yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Digita `y` per installare `create-astro`.
3. Quando il prompt ti chiede dove creare il progetto, digita il nome di una cartella per creare una nuova directory per il tuo progetto, es.
`./tutorial`

    :::note
    Un nuovo progetto Astro può essere creato solo in una cartella completamente vuota, quindi scegli un nome per la tua cartella che non esista già!
    :::

4. Vedrai un breve elenco di modelli di base tra cui scegliere. Usa i tasti freccia (su e giù) per navigare fino al template minimale (vuoto), quindi premi Invio (Enter) per inviare la tua scelta.

5. Quando il prompt ti chiede se installare o meno le dipendenze, digita `y`.

6. Quando il prompt ti chiede se inizializzare o meno un nuovo repository git, digita `y`.
</Steps>

Quando la procedura guidata di installazione è completa, non hai più bisogno di questo terminale. Ora puoi aprire VS Code per continuare.

## Apri il tuo progetto in VS Code

<Steps>
7. Apri VS Code. Ti verrà richiesto di aprire una cartella. Scegli la cartella che hai creato durante la procedura guidata di installazione.

8. Se è la prima volta che apri un progetto Astro, dovresti vedere una notifica che ti chiede se desideri installare le estensioni raccomandate. Clicca per vedere le estensioni raccomandate e scegli l'[estensione di supporto linguistico Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Questo fornirà evidenziazione della sintassi e completamenti automatici per il tuo codice Astro.

9. Assicurati che il terminale sia visibile e di poter vedere il prompt dei comandi, come ad esempio:

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[Scorciatoia da tastiera]
    Per attivare/disattivare la visibilità del terminale, usa <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
    :::
</Steps>

Ora puoi usare il terminale integrato in questa finestra, invece dell'app Terminale del tuo computer, per il resto di questo tutorial.



## Esegui Astro in modalità dev

Per visualizzare in anteprima i file del tuo progetto _come un sito web_ mentre lavori, avrai bisogno che Astro sia in esecuzione in modalità di sviluppo (dev).

### Avvia il server dev

<Steps>
10. Esegui il comando per avviare il server dev di Astro digitando nel terminale di VS Code:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Ora dovresti vedere la conferma nel terminale che Astro è in esecuzione in modalità dev. 🚀
</Steps>

## Visualizza un'anteprima del tuo sito web

I file del tuo progetto contengono tutto il codice necessario per visualizzare un sito web Astro, ma il browser è responsabile della visualizzazione del tuo codice come pagine web.

<Steps>
11. Clicca sul link `localhost` nella finestra del tuo terminale per vedere un'anteprima live del tuo nuovo sito web Astro!

    (Astro utilizza `http://localhost:4321` di default se la porta `4321` è disponibile.)

    Ecco come dovrebbe apparire il sito web starter "Progetto Vuoto" di Astro nell'anteprima del browser:

    ![Una pagina bianca vuota con la parola Astro in alto.](/tutorial/minimal.png)

</Steps>

:::tip[Utilizzo del server dev di Astro]

Mentre il server Astro è in esecuzione in modalità dev, NON sarai in grado di eseguire comandi nella finestra del terminale. Invece, questo pannello ti darà un feedback mentre visualizzi l'anteprima del tuo sito.

Puoi interrompere il server dev in qualsiasi momento e tornare al prompt dei comandi digitando <kbd>Ctrl + C</kbd> nel terminale.

A volte il server dev si interrompe da solo mentre stai lavorando. Se la tua anteprima live smette di funzionare, torna al terminale e riavvia il server dev digitando `npm run dev`.
:::

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso creare un nuovo progetto Astro.
- [ ] Posso avviare il server dev di Astro.
</Checklist>
</Box>

### Risorse

- <p>[Introduzione a Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="external" /> — un video tutorial per installare, configurare e lavorare con VS Code</p>
